import Link from "next/link";

import { SiteFooter } from "@/components/site-footer";

import { notFound } from "next/navigation";

import { revalidatePath } from "next/cache";

import { serverCaller } from "@/lib/trpc/server";

export const dynamic = "force-dynamic";

export default async function FloorPage({

  params,

}: {

  params: Promise<{ slug: string }>;

}) {

  const { slug } = await params;

  const caller = serverCaller();

  const city = await caller.city.bySlug({ slug });

  if (!city) notFound();

  const cityId = city.id;

  const [steppingGroups, djs, promoters, instructors, classes] = await Promise.all([

    caller.steppingGroup.list({ cityId }),

    caller.dj.list({ cityId }),

    caller.promoter.list({ cityId }),

    caller.instructor.list({ cityId }),

    caller.class.list({ cityId }),

  ]);

  async function addSteppingGroup(formData: FormData) {

    "use server";

    const name = String(formData.get("name") ?? "").trim();

    const bio = String(formData.get("bio") ?? "").trim();

    if (!name) return;

    await serverCaller().steppingGroup.create({

      cityId: city!.id,

      name,

      bio: bio || undefined,

    });

    revalidatePath(`/city/${slug}/floor`);

  }

  async function addDj(formData: FormData) {

    "use server";

    const name = String(formData.get("name") ?? "").trim();

    const bio = String(formData.get("bio") ?? "").trim();

    if (!name) return;

    await serverCaller().dj.create({

      cityId: city!.id,

      name,

      bio: bio || undefined,

    });

    revalidatePath(`/city/${slug}/floor`);

  }

  async function addPromoter(formData: FormData) {

    "use server";

    const name = String(formData.get("name") ?? "").trim();

    const bio = String(formData.get("bio") ?? "").trim();

    if (!name) return;

    await serverCaller().promoter.create({

      cityId: city!.id,

      name,

      bio: bio || undefined,

    });

    revalidatePath(`/city/${slug}/floor`);

  }

  async function addInstructor(formData: FormData) {

    "use server";

    const name = String(formData.get("name") ?? "").trim();

    const bio = String(formData.get("bio") ?? "").trim();

    if (!name) return;

    await serverCaller().instructor.create({

      cityId: city!.id,

      name,

      bio: bio || undefined,

    });

    revalidatePath(`/city/${slug}/floor`);

  }

  async function addClass(formData: FormData) {

    "use server";

    const title = String(formData.get("title") ?? "").trim();

    const instructor = String(formData.get("instructor") ?? "").trim();

    const schedule = String(formData.get("schedule") ?? "").trim();

    const isFree = formData.get("isFree") != null;

    if (!title) return;

    await serverCaller().class.create({

      cityId: city!.id,

      title,

      instructor: instructor || undefined,

      schedule: schedule || undefined,

      isFree,

    });

    revalidatePath(`/city/${slug}/floor`);

  }

  return (

    <main className="mx-auto w-full max-w-3xl px-5 py-16 sm:px-8">

      <Link href={`/city/${slug}`} className="kicker hover:text-gold">

        ← {city.name}

      </Link>

      <p className="kicker mt-10 text-ash">

        The Floor · {city.metroLabel}

      </p>

      <h1 className="display mt-3 text-7xl sm:text-8xl">The Floor</h1>

      <p className="serif mt-5 max-w-xl text-xl text-ash">

        The people who keep {city.name} stepping. Groups, DJs, promoters,

        instructors, and classes.

      </p>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <div>

            <p className="kicker text-gold">Section 01</p>

            <h2 className="display mt-2 text-4xl">Stepping Groups</h2>

          </div>

          <span className="kicker text-ash">

            {String(steppingGroups.length).padStart(2, "0")} groups

          </span>

        </div>

        {steppingGroups.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Stepping groups will be listed here as they come on board. Know

            one? Add it below.

          </p>

        ) : (

          <ul className="mt-6">

            {steppingGroups.map((g, i) => (

              <li

                key={g.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-8 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/profile/stepping-group/${g.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {g.name}

                  </Link>

                  {g.bio ? (

                    <p className="serif mt-1 text-lg text-ash">{g.bio}</p>

                  ) : null}

                </div>

              </li>

            ))}

          </ul>

        )}

        <form action={addSteppingGroup} className="mt-8 flex flex-col gap-3">

          <input

            name="name"

            required

            placeholder="Group name (e.g. Smooth City Steppers)"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="bio"

            placeholder="One line about the group (optional)"

            className="serif border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2">

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Add group

            </button>

          </div>

        </form>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <div>

            <p className="kicker text-gold">Section 02</p>

            <h2 className="display mt-2 text-4xl">DJs</h2>

          </div>

          <span className="kicker text-ash">

            {String(djs.length).padStart(2, "0")} djs

          </span>

        </div>

        {djs.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            DJs will be listed here as they come on board. Add the first one

            below.

          </p>

        ) : (

          <ul className="mt-6">

            {djs.map((d, i) => (

              <li

                key={d.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-8 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/profile/dj/${d.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {d.name}

                  </Link>

                  {d.bio ? (

                    <p className="serif mt-1 text-lg text-ash">{d.bio}</p>

                  ) : null}

                </div>

                <span className="kicker border border-[var(--line)] px-3 py-1">

                  DJ

                </span>

              </li>

            ))}

          </ul>

        )}

        <form action={addDj} className="mt-8 flex flex-col gap-3">

          <input

            name="name"

            required

            placeholder="DJ name (e.g. DJ Smooth)"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="bio"

            placeholder="One line (optional)"

            className="serif border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2">

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Add DJ

            </button>

          </div>

        </form>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <div>

            <p className="kicker text-gold">Section 03</p>

            <h2 className="display mt-2 text-4xl">Promoters</h2>

          </div>

          <span className="kicker text-ash">

            {String(promoters.length).padStart(2, "0")} promoters

          </span>

        </div>

        {promoters.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Promoters will be listed here as they come on board. Add the one

            behind your next set below.

          </p>

        ) : (

          <ul className="mt-6">

            {promoters.map((p, i) => (

              <li

                key={p.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-8 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/profile/promoter/${p.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {p.name}

                  </Link>

                  {p.bio ? (

                    <p className="serif mt-1 text-lg text-ash">{p.bio}</p>

                  ) : null}

                </div>

                <span className="kicker border border-[var(--line)] px-3 py-1">

                  PROMOTER

                </span>

              </li>

            ))}

          </ul>

        )}

        <form action={addPromoter} className="mt-8 flex flex-col gap-3">

          <input

            name="name"

            required

            placeholder="Promoter or brand (e.g. Westside Sets)"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="bio"

            placeholder="One line (optional)"

            className="serif border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2">

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Add promoter

            </button>

          </div>

        </form>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <div>

            <p className="kicker text-gold">Section 04</p>

            <h2 className="display mt-2 text-4xl">Instructors</h2>

          </div>

          <span className="kicker text-ash">

            {String(instructors.length).padStart(2, "0")} instructors

          </span>

        </div>

        <p className="serif mt-4 max-w-xl text-lg text-ash">

          Learn from the people who teach it. Instructors offering lessons in{" "}

          {city.name}.

        </p>

        {instructors.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Instructors will be listed here as they come on board. Teach in{" "}

            {city.name}? Add your name below.

          </p>

        ) : (

          <ul className="mt-6">

            {instructors.map((t, i) => (

              <li

                key={t.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-8 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/profile/instructor/${t.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {t.name}

                  </Link>

                  {t.bio ? (

                    <p className="serif mt-1 text-lg text-ash">{t.bio}</p>

                  ) : null}

                </div>

                <span className="kicker border border-[var(--line)] px-3 py-1">

                  LESSONS

                </span>

              </li>

            ))}

          </ul>

        )}

        <form action={addInstructor} className="mt-8 flex flex-col gap-3">

          <input

            name="name"

            required

            placeholder="Instructor name"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <input

            name="bio"

            placeholder="What you teach and how to book a lesson (optional)"

            className="serif border-b border-[var(--line)] bg-transparent py-2 text-lg text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2">

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Add instructor

            </button>

          </div>

        </form>

      </section>

      {}

      <section className="mt-16 border-t border-[var(--line)] pt-10">

        <div className="flex items-end justify-between">

          <div>

            <p className="kicker text-gold">Section 05</p>

            <h2 className="display mt-2 text-4xl">Classes</h2>

          </div>

          <span className="kicker text-ash">

            {String(classes.length).padStart(2, "0")} classes

          </span>

        </div>

        {classes.length === 0 ? (

          <p className="serif mt-8 text-xl text-ash">

            Classes will be listed here as they come on board. Add the first

            one below.

          </p>

        ) : (

          <ul className="mt-6">

            {classes.map((c, i) => (

              <li

                key={c.id}

                className="flex items-center gap-5 border-b border-[var(--line)] py-6"

              >

                <span className="kicker w-8 text-gold">

                  {String(i + 1).padStart(2, "0")}

                </span>

                <div className="flex-1">

                  <Link

                    href={`/city/${slug}/profile/class/${c.id}`}

                    className="display text-2xl text-bone hover:text-gold sm:text-3xl"

                  >

                    {c.title}

                  </Link>

                  <p className="kicker mt-1 text-ash">

                    {[

                      c.instructor ? `WITH ${c.instructor.toUpperCase()}` : null,

                      c.schedule ? c.schedule.toUpperCase() : null,

                    ]

                      .filter(Boolean)

                      .join(" · ") || "SCHEDULE TBD"}

                  </p>

                </div>

                <span className="kicker border border-[var(--line)] px-3 py-1">

                  {c.isFree ? "FREE" : "CLASS"}

                </span>

              </li>

            ))}

          </ul>

        )}

        <form action={addClass} className="mt-8 flex flex-col gap-3">

          <input

            name="title"

            required

            placeholder="Class title (e.g. Intro to Chicago Stepping)"

            className="serif border-b border-[var(--line)] bg-transparent py-3 text-2xl text-bone outline-none placeholder:text-ash focus:border-gold"

          />

          <div className="mt-2 flex flex-wrap items-center gap-4">

            <input

              name="instructor"

              placeholder="Instructor"

              className="kicker border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none placeholder:text-ash focus:border-gold"

            />

            <input

              name="schedule"

              placeholder="Schedule (e.g. Tuesdays 7pm)"

              className="kicker border border-[var(--line)] bg-stage px-4 py-3 text-bone outline-none placeholder:text-ash focus:border-gold"

            />

            <label className="kicker flex items-center gap-2 text-ash">

              <input

                type="checkbox"

                name="isFree"

                className="h-4 w-4 accent-gold"

              />

              Free

            </label>

            <button

              type="submit"

              className="kicker bg-gold px-6 py-3 text-stage hover:bg-gold-bright"

            >

              Add class

            </button>

          </div>

        </form>

      </section>

      <SiteFooter />

    </main>

  );

}